// src/components/sponsorDashboard/mainContent/Pagination.tsx

import { useState } from 'react';

interface PaginationProps {
  currentPage: number;
  setCurrentPage: (page: number) => void;
  totalCount: number;
  pageSize: number;
}

const Pagination = ({ currentPage, setCurrentPage, totalCount, pageSize }: PaginationProps) => {
  const totalPages = Math.ceil(totalCount / pageSize);
  const [inputValue, setInputValue] = useState('');

  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  const handleInputSubmit = () => {
    const num = Number(inputValue);
    if (!isNaN(num)) {
      handlePageChange(num);
      setInputValue('');
    }
  };

  const baseBtn =
    'rounded-xl font-semibold transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:ring-offset-2 text-xs sm:text-sm md:text-base px-3 py-2 sm:px-4 sm:py-2.5 md:px-5 md:py-3';
  const disabledBtn = 'bg-gray-100 dark:bg-slate-700 text-gray-400 border border-gray-200 dark:border-slate-700 cursor-not-allowed';
  const activeBtn = 'bg-white dark:bg-slate-800 border border-blue-500 dark:border-cyan-700 text-blue-600 dark:text-cyan-300 hover:bg-blue-50 dark:hover:bg-slate-700 hover:shadow-md active:bg-blue-100 dark:active:bg-cyan-900 shadow-sm';

  return (
    <div className="flex flex-col sm:flex-row flex-wrap justify-center sm:items-center gap-3 sm:gap-4 md:gap-6 mt-6 mb-4 sm:mt-8 md:mt-10 font-poppins text-xs sm:text-sm md:text-base">
      <div className="flex flex-wrap justify-center gap-2 sm:gap-3 md:gap-4">
        <button
          onClick={() => handlePageChange(1)}
          disabled={currentPage === 1}
          className={`${baseBtn} ${currentPage === 1 ? disabledBtn : activeBtn}`}
        >
          First
        </button>

        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className={`${baseBtn} ${currentPage === 1 ? disabledBtn : activeBtn}`}
        >
          ‹ Prev
        </button>

        <span className="text-gray-700 dark:text-gray-100 font-semibold self-center px-2 sm:px-3 py-2 sm:py-2.5 bg-gray-50 dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700">
          Page
          <span className="mx-1 text-blue-600 dark:text-cyan-300 font-bold">{currentPage}</span>
          <span className="text-gray-500 dark:text-gray-400 font-normal">/ {totalPages}</span>
        </span>

        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className={`${baseBtn} ${currentPage === totalPages ? disabledBtn : activeBtn}`}
        >
          Next ›
        </button>

        <button
          onClick={() => handlePageChange(totalPages)}
          disabled={currentPage === totalPages}
          className={`${baseBtn} ${currentPage === totalPages ? disabledBtn : activeBtn}`}
        >
          Last
        </button>
      </div>

      <div className="flex justify-center items-center gap-2 sm:gap-3 mt-3 sm:mt-0">
        <input
          type="number"
          min={1}
          max={totalPages}
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleInputSubmit()}
          placeholder="Go to"
          className="border border-gray-300 dark:border-slate-700 rounded-xl w-20 sm:w-24 md:w-28 px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 text-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 shadow-sm text-center text-xs sm:text-sm md:text-base bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 transition-all duration-200"
        />
        <button
          onClick={handleInputSubmit}
          className="bg-blue-600 dark:bg-cyan-700 text-white rounded-xl font-semibold shadow-md hover:bg-blue-700 dark:hover:bg-cyan-800 hover:shadow-lg active:bg-blue-800 dark:active:bg-cyan-900 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:ring-offset-2 transition-all duration-200 text-xs sm:text-sm md:text-base px-3 py-2 sm:px-4 sm:py-2.5 md:px-5 md:py-3"
        >
          Go
        </button>
      </div>
    </div>
  );
};

export default Pagination;